Vue.use()注册自定义组件（简易版）

前言

• 全局注册组件的优势在于，当某个弹框之类的组件在全局中注册后使用方便，可以自定义组件显示条件，全局任何地方使用（例如：弹框提示loading、fail、success...等等）

• 这需要用的核心就是Vue.use()这个vue全局api，Vue.use
  官网说的很笼统，可以先作为了解

正文

• 首先先如图创建组件文件及js
  

  

  WX20180308-144354@2x.png

• 
  

1. Loading.vue

    <template lang="html">
      <div class="">
        {{ data }}      </div>
    </template>
    
    <script>
    export default {      name: 'loading',
      data() {        return {          data: 'loadig...'
        }
      }
    }    </script>
    
    <style lang="css">
    </style>

1. index.js

    import myLoading from './Loading'
    
    //方法一：这种方法很简单，需要使用使用时，直接在使用的地方加上<Loading/>标签就行
    const Loading = {      install: function(vue) {
        vue.component('Loading', myLoading)
      }
    }    
    // 方法二：这种是直接显示，在显示该组件是可以加设条件判断，让组件在特定的条件下显示（诸如 提示弹框）
    const Loading = {      install: function(vue) {
        vue.component('Loading', myLoading)        const LoadingObj = vue.extend(myLoading)        let vm = new LoadingObj({          el: document.createElement('div')
        })        console.log(vm);        document.body.appendChild(vm.$el)
      }
    }    // 导出组件
    export default Loading

• 3.main.js

import Vue from 'vue'import App from './App'//这里从loading文件中默认倒入index.js文件import Loading from './components/loading'Vue.use(Loading)export const $vueApp = new Vue({  el: '#app',  render: h => h(App),  components: { App },  template: '<App/>'})

如果采用第二种方法到这了页面已经显示你设置的全局组件
如果采用第一种方法还需要在想要显示的组件中直接使用<Loading/>标签即可

Vue简单只是在于上手容易，高阶用法很多，还需要努力

作者：茶树菇小学生
链接：https://www.jianshu.com/p/5a30caab2cb3
。